<template>
  <el-dialog title="题目预览" :visible.sync="visible" width="50%" :before-close="handleClose">
    <div class="question-preview">
      <!-- 使用 Markdown 组件显示题目内容 -->
      <div class="question-content">
        <Markdown :content="question.content" />
      </div>

      <!-- 选项列表 -->
      <div class="flex-y justify-start" v-if="question.options && question.options.length">
        <div v-for="(option, index) in question.options" :key="index" class="flex-x justify-start items-center">
          <span class="mr-2">{{ String.fromCharCode(65 + index) }}.</span>
          <Markdown :content="option.content" />
        </div>
        <div>正确答案：{{ question.answer }}</div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import Markdown from '@/components/oj/common/Markdown.vue'
import api from '@/common/api';
import { loading } from 'vxe-pc-ui';

export default {
  name: 'QuestionPreviewDialog',

  components: {
    Markdown
  },

  data() {
    return {
      visible: false,
      loading: false,
      question: {},
    }
  },

  methods: {
    open(question) {
      const { id } = question
      this.visible = true
      this.getQuestionContent(id)
    },
    async getQuestionContent(id) {
      try {
        this.loading = true
        const { data } = await api.admin_getQuestionDetail(id)
        this.question = data.data
      } finally {
        this.loading = false
      }
    },
    handleClose() {
      this.visible = false
    }
  }
}
</script>

<style scoped>


</style>
